<template>
  <div class="hot-wrap">
    <div class="flex" v-if="hotArray.length>0">
      <div class="li" v-for="(item,index) in hotArray" :key="index">
        <img :src="item.pictureUrl" alt class="image" />
        <div class="info-two">
          <p class="title">{{item.chineseName}}</p>
          <p class="product-price">
            <span class="activity-price">￥{{ item.marketPrice }}</span>
            <span class="market-price">￥{{ item.productId }}</span> 
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 一行展示两个商品组件 */ 
export default {
  name: "hotProduct",
  components: {},
  props: {
    id: {
      type: String
    }
  },
  data() {
    return {
      // 分类入口数据
      hotArray: [],
    };
  },

  methods: {
    // 根据moduleId 请求商品数据
    getList() {
       this.utils.request.getIndexList({ moduleId: this.id},res=>{
         if( res.data &&  res.data.length >0) {
            this.hotArray = res.data;
         }
        })
    },

  },

  // 请求商品数据
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.hot-wrap {
  width: 375px;
  background: #fff;
  color: #333;
  padding: 10px;
  .flex {
    display: flex;
    flex-wrap: wrap;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-inline-start: 0 !important;
    .li {
      width: 50%;
      margin-bottom: 10px;
      position: relative;
      text-align: center;
      .image {
        display: block;
        width: 165px;
        height: 140px;
      }
      .info-two {
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        color: #999;
        .title {
          font-size: 15px;
          color: #333;
          text-align: left;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .product-name {
          color: #666;
          margin-top: 5px;
        }
        .product-price {
          text-align: left;
          .activity-price {
            color: red;
            font-size: 18px
          }
          .market-price {
            font-size: 14px;
            margin-left: 5px;
            color: #666;
            text-decoration: line-through;
          }
        }
      }
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>


